<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .container {
            /* 响应式版心 */
            max-width: 1200px;
            margin: auto;
        }

        .banner {
            text-align: center;
        }

        .banner img {
            width: 95%;
        }

        .txt {
            /* 高度自适应 */
            background-color: #ff0;
        }

        main ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: #eee;
        }

        main li {
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 20px;
            text-align: center;
        }

        main img {
            width: 100%;
        }


        /* 
            手机两列
            平板三列
            电脑四列
        */
        
        /* 手机 */
        @media screen and (max-width:768px) {
            main ul li {
                width: 48%;
            }
        }

         /* 平板 */
         @media screen and (min-width:768px) and (max-width:1200px){
            main ul li {
                width: 32%;
            }
        }

        /* 电脑 */
        @media screen and (min-width:1200px) {
            main ul li {
                width: 24%;
            }
        }
    </style>
</head>

<body>

    <div class="banner">
        <div class="container">
            <img src="http://infinistudio.cn/Public//Upload/2017-07-14/596870c2d2b94.jpg" alt="">
        </div>
    </div>

    <div class="txt">
        <div class="container">
            <p>少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所</p>
        </div>
    </div>

    <main>
        <div class="container">
            <ul>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>

                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>
                <li>
                    <img src="http://infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg" alt="">
                    <p>的的顶顶顶顶顶</p>
                </li>

            </ul>
        </div>
    </main>

</body>

</html>